<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 20:20:04
-->
<template>
  <!-- 2.创建图表容器 -->
  <div ref="root" style="height: 95%"></div>
</template>
<script>
import { Bar } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const data = [
        {
          label: "Mon.",
          type: "series1",
          value: 2800,
        },
        {
          label: "Mon.",
          type: "series2",
          value: 2260,
        },
        {
          label: "Tues.",
          type: "series1",
          value: 1800,
        },
        {
          label: "Tues.",
          type: "series2",
          value: 1300,
        },
        {
          label: "Wed.",
          type: "series1",
          value: 950,
        },
        {
          label: "Wed.",
          type: "series2",
          value: 900,
        },
        {
          label: "Thur.",
          type: "series1",
          value: 500,
        },
        {
          label: "Thur.",
          type: "series2",
          value: 390,
        },
        {
          label: "Fri.",
          type: "series1",
          value: 170,
        },
        {
          label: "Fri.",
          type: "series2",
          value: 100,
        },
      ];
      const stackedBarPlot = new Bar(this.$refs["root"], {
        data,
        isGroup: true,
        xField: "value",
        yField: "label",
        seriesField: "type",
        marginRatio: 0,
        label: {
          // 可手动配置 label 数据标签位置
          position: "right", // 'left', 'middle', 'right'
          offset: 4,
          color: "white",
        },
        barStyle: { radius: [2, 2, 0, 0] },
        theme: {
          
        },
      });
      stackedBarPlot.render();
    },
  },
};
</script>